import React from 'react';
import ReactDOM from 'react-dom';

// class App extends React.PureComponent {
//   componentDidMount() {
//     // 首先DOM事件监听器被执行，然后事件继续冒泡至document，合成事件监听器再被执行。
//     // 控制台输出 dom event react event
//     const $this = ReactDOM.findDOMNode(this);
//     $this.addEventListener('click', this.onDOMClick, false);
//   }

//   onDOMClick = (evt) => {
//     // 由于DOM事件被阻止冒泡了，无法到达document，所以合成事件自然不会被触发，控制台输出就变成了 dom event
//     // evt.stopPropagation()

//     console.log('dom event');
//   };

//   onClick = (evt) => {
//     console.log('react event');
//   };

//   render() {
//     return <div onClick={this.onClick}>Demo</div>;
//   }
// }

class App extends React.PureComponent {
  componentDidMount() {
    const $parent = ReactDOM.findDOMNode(this);
    const $child = $parent.querySelector('.child');

    // 原生事件
    // 第三个参数为true，则为捕获阶段执行, false则为冒泡阶段执行 默认false冒泡
    $parent.addEventListener('click', this.onParentDOMClick, false);
    $child.addEventListener('click', this.onChildDOMClick, false);
  }

  // 阻止原生事件冒泡 合成事件会失效;
  // 原生事件：捕获->目标->冒泡；合成事件：只有冒泡阶段没有捕获阶段；
  // 所以原生事件的事件监听器的执行总比合成事件早;
  onParentDOMClick = (evt) => {
    // evt.stopPropagation();
    console.log('parent dom event');
  };

  onChildDOMClick = (evt) => {
    console.log('child dom event');
  };

  onParentClick = (evt) => {
    console.log('parent react event');
  };

  onChildClick = (evt) => {
    console.log('child react event');
  };

  render() {
    return (
      <div
        onClick={this.onParentClick} // 冒泡阶段执行
        // onClickCapture={this.onParentClick} // 捕获阶段执行
        style={{ width: '300px', height: '300px', background: 'red' }}
      >
        parent
        <div
          className="child"
          onClick={this.onChildClick}
          style={{ width: '200px', height: '200px', background: 'blue' }}
        >
          child
        </div>
      </div>
    );
  }
}

// 注意：原生事件执行时机早于合成事件，所以原生事件执行完，才会执行合成事件；具体看上面注视
// 点击parent 输出：
// 1 parent dom event
// 2 parent react event

// 点击child 输出：
// 1 child dom event
// 2 parent dom event
// 3 child react event
// 4 parent react event

ReactDOM.render(<App />, document.getElementById('root'));
